<template>
	<view >
		<view style="position: fixed;top: 0;background-color:#F5F5F8 ;padding-bottom: 20rpx;">
			<view>
				<uni-search-bar @confirm="search" @input="input()" v-model="value" placeholder="名称搜索" :radius="100" clearButton="none" cancelButton="none" bgColor="#ffffff"></uni-search-bar>
			</view>
			<view style="display: flex;height: 40rpx;margin-top: 10rpx;">
				<view style="display: flex;" v-if="real">
					<view style="width: 374rpx;height: 32rpx;display: flex;border-right: 2rpx solid #D8D8D8;">
						<view style="margin: auto;display: flex;"@click="light" >
							<view style="font-size: 32rpx;line-height: 32rpx;">已巡查</view>
							<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;">{{num}}</view>
						</view>	
					</view>
					<view style="width: 374rpx;height: 32rpx;display: flex;">
						<view style="margin: auto;display: flex;" @click="light1" >
							<view style="font-size: 32rpx;line-height: 32rpx;color: #388CFE;">未巡查</view>
							<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;color: #388CFE;">{{num1}}</view>
						</view>	
					</view>
				</view>	
				<view style="display: flex;" v-else>
					<view style="width: 374rpx;height: 32rpx;display: flex;border-right: 2rpx solid #D8D8D8;">
						<view style="margin: auto;display: flex;"@click="light" >
							<view style="font-size: 32rpx;line-height: 32rpx;color: #388CFE;">已巡查</view>
							<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;color: #388CFE;">{{num}}</view>
						</view>	
					</view>
					<view style="width: 374rpx;height: 32rpx;display: flex;">
						<view style="margin: auto;display: flex;" @click="light1" >
							<view style="font-size: 32rpx;line-height: 32rpx;">未巡查</view>
							<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;">{{num1}}</view>
						</view>	
					</view>
				</view>	
			</view>
		</view>
		
		<view v-if="real" style="margin-top: 182rpx;">
			
			<view style="width: 690rpx;margin-left: 30rpx;background-color: #FFFFFF;margin-top: 20rpx;display: flex;border-radius: 12rpx;padding-bottom: 20rpx;"  v-for="(item,index) in list" :key="index"  @click="gotoXQ(item.id)">
				<view>
					<view style="font-size: 36rpx;margin-top: 30rpx;margin-left: 30rpx;line-height: 36rpx;">{{item.name}}</view>
					<view style="color: #666666;font-size: 28rpx;line-height: 36rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.address}}</view>
					<view style="display: flex;">
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.corporation}}</view>
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 10rpx;">{{item.corporationMobile}}</view>
					</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 20rpx;margin-left: 30rpx;">二维码编号：{{item.qrCode}}</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 20rpx;margin-left: 30rpx;" v-if="item.answerTime">末次巡查时间：{{item.answerTime}}</view>
				</view>
				<view style="width: 140rpx;height: 106rpx;margin-left: auto;margin-right: 30rpx;margin-top: 70rpx;text-align: center;">
					<image src="../../static/coordinate@3x.png" style="height: 76rpx;width: 52rpx;"></image>
					<view style="color: #FB9A17;font-size: 36rpx;line-height: 36rpx;">{{ item.distance | filterDis }}km</view>
					<!-- <view style="color: #FB9A17;font-size: 36rpx;line-height: 36rpx;margin-top: -10rpx;">{{(item.distance/1000).toFixed(2)}}km</view> -->
					<!-- <view class="">{{item.distance ? (item.distance/1000): 'null'}}</view> -->
					
					
					<!-- <view style="color: #FB9A17;font-size: 36rpx;line-height: 36rpx;margin-top: -10rpx;">{{item.distance | filterDis}}km</view> -->
				</view>
				
			</view>
			<image src="../../static/img_k@3x.png" style="width: 362rpx;height: 360rpx;margin-top: 190rpx;margin-left: 208rpx;" v-if="list.length == 0 && (isLoadMore=='noMore')"></image>
			<view v-else>
				<view v-show="isLoadMore" style="margin-bottom: 30rpx;">
					<uni-load-more :status="isLoadMore" :contentText="contentText" showText="false" @clickLoadMore="loadmore()"></uni-load-more>
				</view>
			</view>
			
		</view>
		
		<view v-else style="margin-top: 182rpx;">
			
			<view style="width: 690rpx;margin-left: 30rpx;background-color: #FFFFFF;margin-top: 20rpx;display: flex;border-radius: 24rpx;padding-bottom: 20rpx;" v-for="(i,index) in listY" :key="i"  @click="gotoXQ(i.id)">
				<view>
					<view style="font-size: 36rpx;margin-top: 30rpx;margin-left: 30rpx;line-height: 36rpx;">{{i.name}}</view>
					<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{i.address}}</view>
					<view style="display: flex;">
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{i.corporation}}</view>
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 10rpx;">{{i.corporationMobile}}</view>
					</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 20rpx;margin-left: 30rpx;">二维码编号：{{i.qrCode}}</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 20rpx;margin-left: 30rpx;">末次巡查时间：{{i.answerTime}}</view>
				</view>
				<view style="width: 114rpx;height: 106rpx;margin-left: auto;margin-right: 40rpx;margin-top: 66rpx;text-align: center;">
					<image src="../../static/coordinate@3x.png" style="height: 76rpx;width: 52rpx;"></image>
					<view style="color: #FB9A17;font-size: 36rpx;line-height: 36rpx;margin-top: -10rpx;">{{ i.distance | filterDis }}km</view>
				</view>
			</view>
			<image src="../../static/img_k@3x.png" style="width: 362rpx;height: 360rpx;margin-top: 190rpx;margin-left: 208rpx;" v-if="listY.length == 0 && (isLoadMoreY=='noMore')"></image>
			<view v-else>
				<view v-show="isLoadMoreY" style="margin-bottom: 30rpx;">
					<uni-load-more :status="isLoadMoreY" :contentText="contentText" showText="false" @clickLoadMore="loadmoreY()"></uni-load-more>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				real:true,
				real222: true,
				active:true,
				list:[],
				num:'',
				num1:'',
				page:1, 
				isLoadMore:'more',
				contentText:{contentdown: "查看更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
				listY:[],
				pageY:1,
				isLoadMoreY:'more',
				lngs:'',
				lats:'',
				timeType:'',
				areaId:'',
				userId:'',
				value:''
			}
		},
		// filters:{
		// 	filterDis(e){
		// 		console.log(e,'----');
		// 		// return e
		// 	}
		// },
		filters:{
			filterDis(e){
				 let num = e/1000
				 return num.toFixed(2)
				// if(e<1000){
				// 	return e ? e.toFixed(0)+'m' : '';;
				// }else if(e==undefined){
				// 	return 0+'m'
				// }
				// else{
				// return (e/2/500).toFixed(2)+'km'
				// }
			},
		},
		methods: {
			input(res){
				console.log(res);
			},
			search(res){
				console.log(res.value);
				this.value=res.value
				if(this.active==true){
					console.log('1241251356125');
					this.$myRequest({
						url:'/project_flood/v1/check/anwser/flood/point/pageInfo',
						data:{"userId":this.userId,"pageNum":this.page,"gridUserId":this.userId,"timeType":this.timeType,"pageSize":100,"type":3,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId,"name":res.value}
					}).then((res)=>{
						console.log(res);
						this.list=res.data.data.page.list
						if(this.list.length<res.data.data.page.total)
							{
								this.isLoadMore='more'
							}
						else
							{
								this.isLoadMore='noMore'
							}
					})
				}
				else{
					this.$myRequest({
						url:'/project_flood/v1/check/anwser/flood/point/pageInfo',
						data:{"userId":this.userId,"pageNum":this.pageY,"gridUserId":this.userId,"timeType":this.timeType,"pageSize":100,"type":1,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId,"name":res.value}
					}).then((res)=>{
						console.log(res);
						this.listY=res.data.data.page.list
						if(this.listY.length<res.data.data.page.total)
							{
								this.isLoadMoreY='more'
							}
						else
							{
								this.isLoadMoreY='noMore'
							}
					})
				}
			},
			light(){
				//已巡查
				this.real=false,
				this.active=false
				this.getnameY()
				this.value=''
			},
			light1(){
				this.real=true,
				this.active=true
				this.getname()
				this.value=''
			},
			gotoXQ(id){
				uni.navigateTo({
					url:'./xiangqing?id='+id
				})
			},
			async getname(){
				this.$myRequest({
					url: '/project_flood/v1/check/anwser/flood/point/pageInfo',
					data: {"userId":this.userId,"pageNum":this.page,"gridUserId":this.userId,"timeType":this.timeType,"pageSize":100,"type":3,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId},
				}).then((res)=>{
					this.list=res.data.data.page.list;
					console.log(this.list,'-----');
					console.log(this.list.length);
					console.log(res.data.data.page.total);
					if(this.list.length<res.data.data.page.total)
						{
							this.isLoadMore='more'
						}
					else
						{
							this.isLoadMore='noMore'
						}
				});
			},
			async getnameY(){
				this.$myRequest({
					url: '/project_flood/v1/check/anwser/flood/point/pageInfo',
					data: {"userId":this.userId,"pageNum":this.pageY,"gridUserId":this.userId,"timeType":this.timeType,"pageSize":100,"type":1,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId},
				}).then((res)=>{
					this.listY=res.data.data.page.list;
					console.log(this.list);
					console.log(this.list.length);
					console.log(res.data.data.page.total);
					if(this.listY.length<res.data.data.page.total)
						{
							this.isLoadMoreY='more'
						}
					else
						{
							this.isLoadMoreY='noMore'
						}
				});
			},
			async getnum(){
				this.$myRequest({
					url: '/project_flood/v1/check/anwser/flood/gridProcess',
					data: {userId: this.userId, community: "", areaId: this.areaId,timeType:this.timeType},
				}).then((res)=>{
					this.num=res.data.data.anwser;
					this.num1=res.data.data.unAnwser;
				});
			},
			loadmore(){
				this.page=this.page+1
				this.$myRequest({
					url: '/project_flood/v1/check/anwser/flood/point/pageInfo',
					data: {"userId":this.userId,"pageNum":this.page,"gridUserId":this.userId,"timeType":"month","pageSize":100,"type":3,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId,"name":this.value},
				}).then((res)=>{
					console.log(res);
					this.list=this.list.concat(res.data.data.page.list)
					if(this.list.length<res.data.data.page.total)
						{
							this.isLoadMore='more'
						}
					else
						{
							this.isLoadMore='noMore'
						}
				})
			},
			loadmoreY(){
				this.pageY=this.pageY+1
				this.$myRequest({
					url: '/project_flood/v1/check/anwser/flood/point/pageInfo',
					data: {"userId":this.userId,"pageNum":this.pageY,"gridUserId":this.userId,"timeType":this.timeType,"pageSize":100,"type":1,"position":"16","point":this.lngs+","+this.lats,"areaId":this.areaId,"name":this.value},
				}).then((res)=>{
					console.log(res);
					this.listY=this.listY.concat(res.data.data.page.list)
					if(this.listY.length<res.data.data.page.total)
						{
							this.isLoadMoreY='more'
						}
					else
						{
							this.isLoadMoreY='noMore'
						}
				})
			}
		},
		
		onLoad(options) {
			try {
				const Y = uni.getStorageSync('userId');
				this.userId=Y;
			    if (Y) {
			        // console.log(X);
			    }
				
			} catch (e) {
			    // error
			}
			this.real=options.yixuncha;
			this.timeType=options.timeType;
			// this.active = options.yixuncha === 'true';
			console.log(this.real,'this.real');
			try {
			    const X = uni.getStorageSync('lng');
				this.lngs=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			try {
			    const Y = uni.getStorageSync('lat');
				this.lats=Y
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			};
			
			console.log(options);
			if(options.areaId!=undefined){
				this.areaId=options.areaId
			}else{
				try {
				    const X = uni.getStorageSync('areaId');
					this.areaId=X;
				    if (X) {
				        // console.log(X);
				    }
					
				} catch (e) {
				    // error
				}
			}
			
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			this.getname();
			this.getnum();
			this.getnameY().then((res)=>{
				 uni.hideLoading();
			})
		}
		
	}
</script>

<style>
page{background-color: #F5F5F8;}
</style>